{extend name="index/base" /}

{block name='title'}Shopping Cart{/block}
{block name='content'}
<div class="category-body" style="background-color: #f5f5f5">
    <div class="container py-5">
        <div class="empty-cart-page" v-if="!goods_list.length">
            <section class="noGoods">
                <h4>Your shopping bag is empty.</h4>
                <p>
                    <a href="/" class="sign_btn">continue shopping</a>
                </p>
            </section>
        </div>
        <div class="cartWrap clearfix mb-2" v-else>
            <div class="cartBox cartList">
                <div class="cartMain">
                    <div class="title">
                        <h4 class="js-shopping-bag clearfix">
                            Shopping Bag
                        </h4>
                    </div>

                    <!-- <div class="giftCenterWrap clearfix">
                        <div class="giftCenter pr">
                            <h3 class="tit pr clearfix">
                                <span class="tit-icon"></span><span class="tit-text fsb">FREE GIFTS</span>
                                <span class="free-designateed-goods">
                                    Get free gifts for buying products from the
                                    <a href="javascript:;" data-href="manzeng/cate/?id=2131&amp;pipeline=zf" class="js-designated-link">specified categories</a>
                                </span>
                            </h3>
                        </div>
                    </div>
                     -->
                    <div class="bug-gift-box" v-if="gift_money>0">
                        <div class="bug-gift-container">
                            <div class="gift-product">
                                <div class="gift-left">
                                    <img alt="img" class="img-icon" src="/assets/images/gift-icon.svg">
                                    <span class="activity-name-span">free gift on orders over ${{gift_money}}</span>
                                </div>
                                <div class="gift-right">
                                    <span class="view-gift not-tablet" @click="show_gift = true"> View gift&gt;</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table>
                        <tbody>
                            <tr class="cart_row cart-flex" v-for="(item,index) in goods_list" :key="index">
                                <td class="cart_checked cart-flex-item">
                                    <span class="dispatch" :class="[item.is_checked?'dispatch-cur':'']" @click="handleChecked(item)"></span>
                                </td>
                                <td class="cart_image cart-flex-item">
                                    <a :href="'/products?id='+item.id">
                                        <img :src="item.cover_img" alt="{{item.name}}" />
                                    </a>
                                </td>
                                <td class="cart_meta cart-flex-item">
                                    <div class="cart_meta_title">
                                        <a :href="'/products?id='+item.id"> {{item.name}}</a>
                                    </div>
                                    <div class="cart_meta_price">
                                        <span class="bizhong">{$money_f_name}</span>
                                        <span class="my_shop_price">{$money_f}{{item.sold_price}}</span>
                                    </div>
                                    <div class="cart_meta_text">
                                        <span class="sku_box">{{item.sku_name}}</span>

                                        <span class="cart_meta_text-btn">
                                            {if(!empty(session('user_info.user_id')))}
                                                <a href="javascript:void(0);" class="save_action logsss_event_cl js_save_later" @click="handleGoodsColl(item)">Move to favorites</a>
                                            {/if}

                                            <a href="javascript:void(0);" class="del_action logsss_event_cl js_del_action"   @click="handleDel(item,index)">Delete</a>
                                        </span>
                                    </div>
                                </td>
                                <td class="cart_update cart-flex-item">
                                    <div class="wrap-input fr clearfix qty ">
                                        <button style="" class="reduce logsss_event_cl js_updateNum disabled"  @click="handleBuyNum(item,-1)">-</button>
                                        <input style="" type="number" class="text fl js_cartNum" v-model="item.buy_num" maxlength="3" @input="handleBuyNumInput($event,item)">
                                        <button style="" class="add logsss_event_cl js_updateNum " @click="handleBuyNum(item,1)">+</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- <div class="cart-section">
                        <div class="git_message">
                            <label for="">Message To Seller：</label>
                            <textarea class="form-control" rows="6" id="order-comments" placeholder="Optional, please consult with the merchant first"></textarea>
                        </div>
                    </div> -->
                </div>
                <div class="itemBtn js-select-all-wrapper clearfix" >
                    <label class="line_checkbox pr"  @click="handleSelectAll">
                        <span class="js-checkbox dispatch" :class="[all_check_state?'dispatch-cur':'']" ></span>
                        <span>Select All</span>
                    </label>
                    <button type="button" class="btn-delete-all logsss_event_cl"  @click="handleDel({},true)" v-show="get_goods_selected_lists.length>0" >      Delete      </button>

                    <div class="subtotal">
                        Subtotal ({{get_buy_num}} items)：{$money_f}{{get_total_money}}
                    </div>
                </div>


            </div>

            <div class="carRight">
                <div class="cartBox checkoutBox">
                    <div class="title"><h4>Order Summary</h4></div>

                    <div class="cartMain">
                        <div class="coupon">
                            <div>
                                <span>Coupon Code</span>
                            </div>
                        </div>
                        <div id="js_checkoutPanelView">
                            <div class="userCoupon clearfix">
                                <el-autocomplete placeholder="Enter or Select coupon code" value-key="name"  v-model="coupon_name" :fetch-suggestions="querySearch" @select="selectUseCoupon"> </el-autocomplete>
                                <button type="submit" class="applybtn logsss_event_cl" id="applybtn" @click="handleUseCoupon">APPLY</button>

                                <!--<input name="promotion_code" type="text" id="promotion_code" value="" maxlength="40" placeholder="Enter or select coupon code" autocomplete="off">-->
                                <div class="coupon_status ">
                                    <div id="apply_msg" class="color-red">{{get_coupon_obj.name}}</div>
                                </div>
                            </div> <!-- coupon -->
                            <div class="cartTotal" id="js_cart_count">
                                <ul class="clearfix">
                                    <li>Subtotal</li>
                                    <li class="colorpink tr"><span class="bizhong">{$money_f_name}</span><span
                                            class="fb js-totalPrice price-temp" >{$money_f}{{get_total_money}}</span>
                                    </li>
                                </ul> <!--  -->
                                <ul class="mt-1 color-red clearfix" v-if="get_coupon_obj.id">
                                    <li class="coupon-item">Coupon </li>
                                    <li class="tr color-red">-<span class="bizhong">{$money_f_name}</span><span
                                            class="my_shop_price minus price-temp" >{$money_f}{{get_coupon_money}}</span>
                                    </li>
                                </ul>
                                <ul class="mt-1 color-red clearfix" v-if="get_goods_gift_low_money-0 > 0">
                                    <li class="coupon-item">Free Gift </li>
                                    <li class="tr color-red">-<span class="bizhong">{$money_f_name}</span><span
                                            class="my_shop_price minus price-temp" >{$money_f}{{get_goods_gift_low_money}}</span>
                                    </li>
                                </ul>
                                <ul class="grandTotal clearfix">
                                    <li class="f16 fsb tl">Total</li>
                                    <li class="tr">
                                        <span class="bizhong">{$money_f_name}</span>
                                        <span class="fsb" id="price_total" >{$money_f}{{get_pay_money}}</span> </li>
                                </ul>
                            </div>

                            <div class="checkoutBtnWrap js-btn-checkout">
                                <a href="javascript:;" class="checkoutBtn js_upMyorderBtn logsss_event_cl " @click="handlePay">Safe Payment</a>
                            </div>

                            <!--<div class="checkoutBtnWrap pp-btnWrap clearfix js-pp-checkout">
                                <button type="submit" class="paypalBtn logsss_event_cl js_upMyorderBtn" id="js-paypal"></button>
                            </div>-->


                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 赠品 -->
        <div class="layui-layer" v-show="show_gift" style="display: none;">
            <div class="layui-layer-content">
                <div class="collocation-panel">
                    <button type="button" id="close-btn" class="btn-close" @click="hideGift"></button>
                    <div class="collocation-list-wrapper">

                        <div class="good-item-container clearfix" v-for="(item,index) in gift_list" :key="index">
                            <a href="javascript:;" class="good-img-link" rel="nofollow">
                                <img :src="item.cover_img" alt="" loading="lazy" decoding="async">
                                <span class="link-remove-item"></span>
                            </a>
                            <div class="good-attr-wrapper">

                                <p class="good-name">{{item.name}}</p>

                                <p class="good-price"><span class="my_shop_price">{$money_f} {{item.sku_select_obj.sold_price}}</span></p>
                                <div class="good-attr-list">
                                    <li class="good-attr-item" v-for="(sku,sku_index) in item.sku_attr" :key="index">
                                        <div class="good-attr-item-content clearfix">
                                            <div class="option " :class="[sku_content.img && sku_content.img.length>0?'color':'size',item['sku_group_name'] && item['sku_group_name'][sku_index]==sku_content.name ? 'active':'' ]" v-for="(sku_content,sku_content_index) in sku.content" :key="sku_content_index"
                                                 @click="handleGoodsSkuItem(item,sku_index,sku_content.name)"
                                            >

                                                <a href="javascript:;" v-if="sku_content.img && sku_content.img.length>0">
                                                    <img :src="sku_content.img">
                                                </a>
                                                <a href="javascript:;" v-else>{{sku_content.name}}</a>
                                            </div>
                                        </div>
                                    </li>
                                </div>
                                <template v-if="item.sku_price.length>0">
                                    <button class="confirm-addto-bag" @click="handleGoodsAddCart(item.id,item.sku_select_obj.id)" >
                                        <span>ADD TO BAG</span>
                                    </button>

                                </template>
                                <template v-else>
                                    <button class="confirm-addto-bag"  @click="handleGoodsAddCart(item.id)" >
                                        <span>ADD TO BAG</span>
                                    </button>
                                </template>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>




    </div>
</div>
{/block}
{block name='script'}
<!-- Vendor scrits: js libraries and plugins-->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/tiny-slider.js"></script>
<script src="/assets/js/smooth-scroll.polyfills.min.js"></script>


<script src="/assets/js/swiper.min.js"></script>

<script>

    layui.extend({

    }).use([], function () {
        var swiper = new Swiper('.proList-swiper .swiper-container', {
            slidesPerView: 4,
            spaceBetween: 15,
            slidesPerGroup: 4,
            breakpointsInverse: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });

        initVue({
            data: {
                listQuery:{
                },
                gift_money:0,
                coupon_name:'',
                coupon_id:'',
                coupon_obj:{},
                goods_list: [],
                coupon_list: [],
                show_gift:false,
                gift_list:[],
                show_gift:false,
            },
            components: {
            },
            computed: {
                get_goods_selected_lists:function(){
                    return this.goods_list.filter(function(item){return item.is_checked===1})
                },
                get_goods_gift_low: function(){
                    var gift_goods = undefined
                    this.get_goods_selected_lists.map(function(item){
                        if (item.is_gift===1 && ( !gift_goods || item.sold_price-0 < gift_goods.sold_price-0 )) {
                            gift_goods = item
                        }
                    })
                    return gift_goods
                },
                get_goods_gift_low_money:function(){
                    var money = 0;
                    if(this.get_goods_gift_low && this.get_total_money -0 > this.gift_money) {
                        money = this.get_goods_gift_low.sold_price - 0
                    }
                    return money.toFixed(2)
                },
                get_buy_num:function(){
                    var num = 0;
                    this.get_goods_selected_lists.map(function(item){
                        num += item.buy_num
                    })
                    return num;
                },
                get_total_money:function(){
                    var money = 0;
                    this.get_goods_selected_lists.map(function(item){
                        money += (item.sold_price - 0) * item.buy_num
                    })
                    return money.toFixed(2);
                },
                all_check_state:function (){

                    return this.goods_list.length > 0 && this.get_goods_selected_lists.length === this.goods_list.length
                },

                get_goods_ids:function(){
                    var data = [];
                    this.get_goods_selected_lists.map(function(item){
                        data.push(item.id)
                    })
                    return data;
                },
                get_coupon_obj:function(){
                    return this.coupon_obj
                },
                get_coupon_money:function(){
                    var money = 0
                    if(this.get_coupon_obj.id){
                        money = this.get_coupon_obj.money - 0
                    }
                    return money.toFixed(2)
                },
                get_pay_money:function(){
                    var money = this.get_total_money - 0 - this.get_coupon_money - this.get_goods_gift_low_money
                    return money.toFixed(2)
                },
            },
            created: function () {

            },
            mounted: function () {
                this._initData()
                this.getGiftGoods()
            },
            methods: {
                _initData:function(){
                    const that = this
                    this.$network('goods/cartlists',this.listQuery).then(function(res){
                        var data = res.data || {}
                        that.gift_money = (data.gift_money || 0) -0
                        that.goods_list = data.goods_list ||[]
                        that.coupon_list = data.coupon_list ||[]

                    })
                },
                hideGift:function() {
                    this.show_gift = false
                    this.$nextTick(function(){
                        this._initData()
                    })
                },
                handleChecked:function(item) {
                    const that = this
                    const is_checked = item.is_checked?0:1
                    this.$network('goods/cartModInfo',{
                        id:item.cart_id,
                        is_checked:is_checked
                    }).then(function(res){
                        item.is_checked = is_checked
                        that.handleDataChanged()
                    })
                },
                handleSelectAll:function(){
                    const is_checked = this.all_check_state?0:1
                    const that = this
                    this.$network('goods/cartModInfo',{
                        is_checked:is_checked,
                        mode:'',
                    }).then(function(res){
                        that.goods_list.map(function(item){
                            item.is_checked = is_checked
                        })
                        that.handleDataChanged()

                    })

                },
                handleBuyNumInput:function(e,item){
                    this.$network('goods/cartModInfo',{ id:item.cart_id,num:item.buy_num })
                    this.handleDataChanged()
                },
                handleBuyNum:function(item,num){
                    if(num===-1 && item.buy_num<=1){
                        return
                    }
                    item.buy_num += num
                    this.$network('goods/cartModInfo',{ id:item.cart_id,num:item.buy_num })
                    this.handleDataChanged()
                },
                handleDel:function(item,index){
                    var cart_ids = []
                    var that = this

                    if(index!==true){
                        cart_ids.push(item.cart_id)
                    }else{
                        this.get_goods_selected_lists.map(function(item){
                            cart_ids.push(item.cart_id)
                        })
                    }
                    if(!cart_ids.length){
                        this.$message.error("{:lang('tip_del_selected_empty')}")
                        return
                    }

                    this.$confirm("{:lang('tip_delete_data')}", '{:lang("tip")}',{
                        confirmButtonText: "{:lang('sure')}",
                        cancelButtonText: "{:lang('cancel')}",
                        type: 'warning'
                    }).then(function(){
                        that.$network('goods/cartDel',{
                            id:cart_ids
                        }).then(function(res){
                            if(index!==true){
                                that.goods_list.splice(index,1)
                            }else{
                                that.goods_list.map(function(item){
                                    if (item.is_checked===1){
                                        that.$nextTick(function(){
                                            const _index = that.goods_list.indexOf(item)
                                            console.log('_index',_index)
                                            that.goods_list.splice(_index,1)
                                        })

                                    }
                                })
                            }
                            that.handleDataChanged()
                        }).catch(function(err){

                        })
                    })


                },
                handleDataChanged:function(){
                    this.coupon_id = ""
                },
                handlePay:function(){
                    var href = "/order/preview?channel=cart"
                    if (this.get_coupon_obj.id){
                        href += "&coupon_id="+this.get_coupon_obj.id
                    }
                    window.location.href=href
                },
                querySearch:function(queryString, cb) {
                    var restaurants = this.coupon_list;
                    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                },
                createFilter:function(queryString) {
                    return (restaurant) => {
                        return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    };
                },

                couponChanged:function(){
                    const full_money = this.get_coupon_obj.full_money - 0
                    if ( full_money > this.get_total_money ){
                        this.coupon_id = ""
                        this.$message.error("Coupons must be at least "+full_money+" before they can be used")
                        return
                    }
                },
                selectUseCoupon:function(coupon){
                    this.coupon_obj = coupon
                    this.$nextTick(function(){
                        this.couponChanged()
                        this.coupon_name = ''
                    })
                },
                handleUseCoupon:function(e){
                    if(!this.coupon_name.length){
                        return
                    }
                    var that = this;
                    this.$network('coupon/search',{
                        goods_ids: this.get_goods_ids,
                        code:this.coupon_name
                    }).then(function(res){
                       var data = res.data||{}
                       var coupon = data.coupon||{}
                       that.selectUseCoupon(coupon)

                    }).catch(function(err){
                        that.coupon_obj = {}
                    })
                },
                getGiftGoods:function(){
                    const that = this
                    this.$network('goods/lists',{
                        check_gift : 1,
                        limit:100,
                    }).then(function(res){
                        var data = res.data || {}
                        var gift_list = data.list||[]

                        gift_list.map(function(goods){
                            that.handleGoodsShowCart(goods)
                        })
                        that.gift_list = gift_list
                    })
                }

            },
        })


    })

</script>


{/block}